<template>
  <div>
    <h1>全名</h1>
    <span>{{ name.firstName }} </span>
    <span>{{ name.lastName }} </span>

    <hr>
    <span>数量: {{ count }} </span>
    <button @click="count++">数量+1</button>

    <hr>
    <h1>ref定义简单数据类型</h1>
    <p>数字:{{ num }} </p>
    <button @click="addNum">添加数字</button>

    <h1>ref定义复杂数据类型</h1>
    <p>arr:{{ arr }}</p>
    <button @click="addArr">添加数组</button>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'


export default {

  setup() {
    // 响应式数据
    // 1. reactive
    //  - reactive只能定义复杂数据类型,定义基本数据类型不会响应式

    // 2. ref
    //  - ref能定义简单数据类型和复杂数据类型
    //  - ref定义的数据在模板中直接消费, 在setUp中需要.value

    // 3. 使用 reactive or ref?
    // ref比reactive使用复杂, 在setUp中需要.value,增加心智负担
    // 但ref在vue3.2后, 比reactive性能提高

    const name = reactive({ //To difine object is ok 
      firstName: '张',
      lastName: '三'
    })

    const count = reactive(0) //定义简单数据类型没有响应式

    // ref定义简单数据类型
    const num = ref(0)
    // ref定义复杂数据类型
    const arr = ref([
      '张飞',
      '关于',
      '赵云'
    ])
    //ref 定义的数据类型在模板中直接消费, 在setUp中需要 .value
    const addNum = () => num.value++
    const addArr = () => arr.value.push(Math.random())
    return {
      name,
      count,
      num,
      arr,
      addNum,
      addArr
    }

  }
}
</script>